<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生数据管理</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>学生信息管理系统</h2>
        
        <!-- 新增按钮 -->
        <button id="addBtn" class="add-btn">新增学生</button>

        <!-- 新增/编辑表单（默认隐藏） -->
        <div id="formContainer" class="form-container">
            <h3 id="formTitle">新增学生</h3>
            <input type="hidden" id="editId">
            <div class="form-item">
                <label>姓名：</label>
                <input type="text" id="nameInput" required>
            </div>
            <div class="form-item">
                <label>年龄：</label>
                <input type="number" id="ageInput" required>
            </div>
            <div class="form-item">
                <label>专业：</label>
                <input type="text" id="majorInput" required>
            </div>
            <div class="form-item">
                <label>年级：</label>
                <input type="text" id="gradeInput" required>
            </div>
            <div class="form-btns">
                <button id="submitBtn">提交</button>
                <button id="cancelBtn">取消</button>
            </div>
        </div>

        <!-- 学生表格 -->
        <table id="studentTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>年级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- JavaScript动态渲染数据 -->
            </tbody>
        </table>
    </div>

    <script src="script.js"></script>
</body>
</html>
